<template>
  <div id="app">
    <div class="app_son" v-if="login">
      <router-view/>
    </div>
    <div class="app_son" v-if="!login">
      <div class="topp">
        <v-title></v-title>
      </div>
      <div class="content">
        <div class="left">
          <v-nav></v-nav>
        </div>
        <div class="right">
          <p v-show="flag" v-html="title"></p>
          <div class="right-son">
            <router-view/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import nav from "./components/common/nav.vue";
import title from "./components/common/title.vue";
import "./assets/icon/iconfont.css";

export default {
  name: "App",
  data() {
    return {
      flag: true,
      login: false, //是否是注册/登陆页面
      title: ""
    };
  },
  created() {
    this.watchRouter(this.$route.path);

  },
  updated() {
    t.timer ? clearInterval(t.timer) : "";
  },
  methods: {
    // disabledmousewheel() {
    //   let listinput = document.querySelectorAll("input[type=number]");
    //   let length = listinput.length,
    //     i = 0;
    //   //IE/Opera/Chrome
    //   while (i <= length - 1) {
    //     input(listinput[i]);
    //     i++;
    //     console.log(1111)
    //   }
    //   function MouseWheel(event) {
    //     event = event || window.event;
    //     event.preventDefault();
    //   }
    //   function input(node) {
    //     if (document.addEventListener) {
    //       //兼容firefox
    //       node.addEventListener("DOMMouseScroll", MouseWheel, false);
    //     } //W3C //IE/Opera/Chrome
    //     if (document.addEventListener) {
    //       //兼容firefox
    //       node.addEventListener("DOMMouseScroll", MouseWheel, false);
    //     } //W3C
    //   }
    // },
    watchRouter(router) {
      switch (router) {
        case "/":
          this.$router.push("/login");
          break;
        case "/financial":
          this.title = "财务中心&nbsp;>&nbsp;财务汇总";
          break;
        case "/capitaldetails":
          this.title = "财务中心&nbsp;>&nbsp;资金明细";
          break;
        case "/forward":
          this.title = "服务中心&nbsp;>&nbsp;建仓管理";
          break;
        case "/ApplyFor":
          this.title = "服务中心&nbsp;>&nbsp;建仓管理&nbsp;>&nbsp;建仓申请";
          break;
        case "/jiancangpayment":
          this.title = "服务中心&nbsp;>&nbsp;建仓管理&nbsp;>&nbsp;建仓支付";
          break;
        case "/delivery":
          this.title = "服务中心&nbsp;>&nbsp;提货管理";
          break;
        case "/PickUp":
          this.title = "服务中心&nbsp;>&nbsp;提货管理&nbsp;>&nbsp;提货申请";
          break;
        case "/investment":
          this.title = "服务中心&nbsp;>&nbsp;复投管理";
          break;
        case "/cast":
          this.title = "服务中心&nbsp;>&nbsp;复投管理&nbsp;>&nbsp;复投申请";
          break;
        case "/servicecentre":
          this.title = "服务中心&nbsp;>&nbsp;提现管理";
          break;
        case "/WithdrawDeposit":
          this.title = "服务中心&nbsp;>&nbsp;提现申请";
          break;
        case "/ReferralLinks":
          this.title = "会员中心&nbsp;>&nbsp;推广链接";
          break;
        case "/extension":
          this.title = "会员中心&nbsp;>&nbsp;推广列表";
          break;
        case "/AnnouncementList":
          this.title = "消息中心&nbsp;>&nbsp;公告";
          break;
        case "/Announcement":
          this.title = "消息中心&nbsp;>&nbsp;公告";
          break;
        case "/pickupPay":
          this.title = "服务中心&nbsp;>&nbsp;提货管理&nbsp;>&nbsp;提货支付";
          break;
        case "/dailyPerformance":
          this.title = "财务中心&nbsp;>&nbsp;每日业绩";
          break;
        case "/Inbox":
          this.title = "消息中心&nbsp;>&nbsp;收件箱";
          break;
        case "/personalInfo":
          this.title = "账户中心&nbsp;>&nbsp;个人资料";
          break;
        case "/changePwd":
          this.title = "账户中心&nbsp;>&nbsp;修改密码";
          break;
        case "/authenticateInfo":
          this.title = "账户中心&nbsp;>&nbsp;个人信息认证";
          break;
        case "/inbox_table":
          this.title = "消息中心&nbsp;>&nbsp;收件箱";
          break;
        case "/hairbox":
          this.title = "消息中心&nbsp;>&nbsp;发件箱";
          break;
        case "/sendBox":
          this.title = "消息中心&nbsp;>&nbsp;发件箱";
          break;
        case "/Write":
          this.title = "消息中心&nbsp;>&nbsp;写信";
          break;
        case "/Information":
          this.title = "消息中心&nbsp;>&nbsp;资讯";
          break;
        case "/newsList":
          this.title = "消息中心&nbsp;>&nbsp;资讯";
          break;
        case "/news":
          this.title = "消息中心&nbsp;>&nbsp;资讯";
          break;
        default:
          this.title = "xxxx中心";
          break;
      }
      if (
        (router === "/login") |
        (router === "/register") |
        (router === "/registerTips") |
        (router === "/forgetPwd")
      ) {
        this.login = true;
      } else {
        this.login = false;
      }
      if (router !== "/index") {
        this.flag = true;
      }
    }
  },
  components: {
    "v-nav": nav,
    "v-title": title
  },
  watch: {
    "$route.path": function(newVal, oldVal) {
      //监听路由变化
      this.watchRouter(newVal);
    }
  }
};
</script>
<style lang='less'>
.el-input-number__decrease,
.el-input-number__increase {
  z-index: 11;
}
body > #app {
  width: 100%;
  height: 100%;
}
body > #app > .app_son {
  width: 100%;
  height: 100%;
}
body > #app > .app_son > .content {
  width: 100%;
  height: calc(100% - 90px);
}
</style>
<style lang='less'>
@import "../static/base/base.css";

* {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  min-width: 1280px;
  min-height: 800px;
  overflow: auto;
}
.topp {
  height: 90px;
}
.content {
  > .left {
    width: 240px;
    height: 100%;
    float: left;
  }
  > .right {
    overflow: hidden;
    height: 100%;
    background-color: #eff1f3;
    padding: 20px;
    > p {
      color: #666;
      font-size: 12px;
      font-family: simsun;
      padding-bottom: 20px;
    }
    > .right-son {
      // background-color: #fff;
      height: calc(100% - 34px);
    }
  }
}
</style>
<style lang='less'>
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: #fff3d9 !important;
  color: #ffa200 !important;
}
.el-table td.gutter,
.el-table th.gutter {
  background: rgb(37, 40, 52);
  width: 17px !important;
}
.el-table .has-gutter th:nth-last-of-type(2) {
  border-right: 1px solid rgb(37, 40, 52) !important;
}

input {
  outline: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.is-opened {
  .el-submenu__title {
    color: rgb(255, 255, 255) !important;
  }
  .el-menu-item {
    // color: rgb(255, 255, 255) !important;
  }
  // .side_icon {
  //   filter: drop-shadow(0px 0px 0px #fff);
  // }
  .is-active {
    border-right: 5px solid #ffb001;
    background-color: #1c1f27 !important;
    font-weight: 700;
  }
  .el-submenu {
    background-color: #20242e !important;
  }
}
.el-input__inner {
  position: relative;
  z-index: 10;
  background-color: transparent;
}
.el-input__prefix {
  color: #ffb001;
  position: absolute;
  right: -100px;
}
.el-date-editor {
  width: 250px !important;
}
.el-input__inner {
  padding-left: 15px !important;
  padding-right: 15px !important;
  height: 38px;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #ffb001;
  border-color: #ffb001;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #737373;
}
.el-checkbox__inner {
  border-radius: 0px;
}
.active {
  background-color: #ffb001 !important;
  color: white !important;
  width: 28px;
  height: 28px;
  border-radius: 2px;
}
.el-pagination__total {
  margin-left: 20px;
}
.el-icon-date {
  border-left: 1px solid #dcdfe6;
  padding-left: 10px;
}
.el-table__body-wrapper {
  &::-webkit-scrollbar {
    background-color: #f5f5f5;
    width: 3px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #d6d6d6;
  }
}
.el-table__header {
  th:nth-of-type(15) {
    .cell {
      width: 100px !important;
    }
  }
  th {
    .cell {
      width: 112px;
    }
  }
}
.el-submenu__title {
  padding-left: 50px !important;
}
.has-gutter {
  th:nth-of-type(1) {
    // padding-left: 30px;
  }
}
.el-table__body {
  tr {
    td:nth-of-type(1) {
      // padding-left: 30px;
    }
  }
}

.el-table__expanded-cell {
  // height: 45px !important;
  padding: 0 !important;
  padding: 0px 0px 0px 3% !important;
  box-sizing: border-box !important;
  background-color: #faf9f7;
  color: #a8a8a8;
  .el-form-item {
    width: 9.3%;
    padding-left: 18px !important;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .el-form-item__content {
    position: relative;
    top: 13px;
  }
  .el-form-item:nth-of-type(1) {
    padding-left: 12px !important;
  }
  .el-form-item:last-child {
    color: #5286ff;
  }
}
input::-webkit-input-placeholder {
  color: #999;
}
.el-table__row {
  &:hover {
    td {
      background-color: #fff3d9 !important;
    }
  }
}
.el-input__inner {
  position: relative;
}
.el-input__prefix {
  color: #ffb001;
  position: absolute;
  right: -80px;
}
.el-range-editor.is-active,
.el-range-editor.is-active:hover {
  border-color: #ffa200 !important;
}
.el-date-table td.today span {
  color: #ffa200 !important;
  font-weight: 700;
}
.el-button--text {
  color: #ffa200 !important;
  background: 0 0;
  padding-left: 0;
  padding-right: 0;
}
.el-date-table td.end-date span,
.el-date-table td.start-date span {
  background-color: #ffa200;
}
.el-date-editor {
  width: 350px !important;
  border: 1px solid #b4b4b4;
}
.el-input.is-active .el-input__inner,
.el-input__inner:focus {
  border-color: #ffb001;
  outline: 0;
}
.el-textarea__inner:focus {
  outline: 0;
  border-color: #ffb001;
}
.el-table th > .cell {
  // border: 1px solid #000;
  min-width: 124px !important;
}
.el-select .el-input__inner:focus {
  border-color: #ffb001;
  outline: 0;
}
.el-select .el-input.is-focus .el-input__inner {
  border-color: #ffb001;
}
input:focus {
  border-color: #ffb001 !important;
}
input {
  border-color: #dcdfe6 !important;
}
.el-select .el-input .el-select__caret {
  position: relative;
  z-index: 100;
}
</style>

